<template>
  <div class="demo-type">

   <el-card class="box-card">
     <el-avatar :size="60" src="#" @error="errorHandler">
       <img :src="customer.photo"/>
     </el-avatar>
     <div slot="header" class="clearfix">
       <span style="float: left;">个人信息</span>
       <el-button style="float: right; padding: 3px 0" type="text">上传头像</el-button>
     </div>

     <div class="text item" style="text-align: left; margin-top: 10px;">
        姓名:{{customer.name}}
         <el-button type="primary" icon="el-icon-edit" circle class="b1"></el-button>
     </div>
     <div class="text item" style="text-align: left;margin-top: 10px;">
        电话:{{customer.telephone}}
         <el-button type="primary" icon="el-icon-edit" circle class="b1"></el-button>
     </div>
     <div class="text item" style="text-align: left;margin-top: 10px;">
        余额:{{customer.money}}
         <el-button type="primary" icon="el-icon-edit" circle class="b1"></el-button>
     </div>
     <div class="text item" style="text-align: left;margin-top: 10px;">
        支付密码:******
         <el-button type="primary" icon="el-icon-edit" circle class="b1"></el-button>
     </div>
     <div class="text item" style="text-align: left; margin-top: 10px;">
        收货地址:{{customer.address}}
         <el-button type="primary" icon="el-icon-edit" circle class="b1"></el-button>
     </div>
   </el-card>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        customer:[]
      }
    },
    mounted: function() {
      this.loadGoods()
    },
    methods: {
      errorHandler() {
        return true
      },
      loadGoods() {
        this.$axios.get('/getCustomer').then(resp => {
            this.customer = resp.data
        })
      }
    }
  }
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 30px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width:50%;
  }
  .b1{
    float: right;
  }
  .demo-type{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }
</style>
